<template>
    <div class="right content">
        <h3>漫游模式</h3>
        <button @click="changeToMap">常规模式</button>
        <button @click="changeToRotateGlobe">地球自转</button>
        <button @click="changeToWalk">第一人称漫游</button>
        <hr>
        <h3>沿线漫游</h3>
        <button @click="createLine">创建线</button>
        <button @click="changeToLine">沿线漫游</button>
    </div>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { Message } from "earthsdk-ui";
import getMyProjectManager from '@/scripts/getMyProjectManager';
import { ESGeoLineString } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const pm = getMyProjectManager();

const changeToRotateGlobe = () => {
    pm.activeViewer.changeToRotateGlobe();
}

const changeToMap = () => {
    pm.activeViewer.changeToMap();
}

const changeToWalk = () => {
    // Message.loading({ id: '123', content: "请在三维中点击选择一个漫游初始位置！" });
    pm.activeViewer.changeToWalk([116.39, 39.9, 10]);
}

let line;
const createLine = () => {
    if (line) {
        line.flyTo();
        return;
    }
    const sceneObject = pm.createSceneObjectFromClass(ESGeoLineString);
    if (!sceneObject) return;
    line = sceneObject;
    sceneObject.editing = true;
    Message.loading({ id: sceneObject.id, content: "对象创建成功，请在三维中点击绘制线，双击结束。" });
    sceneObject.d(sceneObject.editingChanged.donce((e) => {
        !e && (Message.remove(sceneObject.id));
    }))
}

const changeToLine = () => {
    if (!line) {
        Message.warning("ESGeoLineString对象未创建！");
        return;
    }
    pm.activeViewer.changeToLine(line.id);
}


onBeforeUnmount(() => {
    changeToMap();
    line && pm.destroySceneObject(line);
    line = null;
})

</script>

<style scoped>
.right {
    width: 100%;
    height: 100%;
    background: url(../../assets/right/kuang.png) no-repeat;
    background-size: 100% 100%;
}

.content {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.content button {
    padding: 10px 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>
